import React from "react";
import { Table, Space, Button, Modal, Badge, Radio } from "antd";
import { useDispatch } from "react-redux";
import { setUpdateVisible, fetchOrder } from '../../store/slice/orderSlice';
import { setItemInfoVisible, fetchItemInfo } from '../../store/slice/itemInfoSlice';
import { setInfoVisible, fetchReceive } from '../../store/slice/receiveSlice';
const { Column } = Table;

export default function List({ show, orderData, pagination }) {
    const dispatch = useDispatch();
    const handleChange = ({ current, pageSize }) => {
        show({ current, pageSize });
    }

    const handleEdit = (id) => {
        dispatch(fetchOrder(id));
        dispatch(setUpdateVisible(true));
    }

    const showDetail = async (id) => {
        dispatch(fetchItemInfo(id));
        dispatch(setItemInfoVisible(true));
    }

    const showReceiveInfo = async (id) => {
        dispatch(fetchReceive(id));
        dispatch(setInfoVisible(true));
    }

    return (
        <>
            <Radio.Group buttonStyle="solid" style={{ marginTop: "10px" }} onChange={(e) => { show({ type: e.target.value ? "status" : "", value: e.target.value, current: 1 }) }}>
                <Radio.Button>全部</Radio.Button>
                <Radio.Button value={1}>待支付</Radio.Button>
                <Radio.Button value={2}>已支付</Radio.Button>
                <Radio.Button value={3}>正在运送</Radio.Button>
                <Radio.Button value={4}>已完成</Radio.Button>
                <Radio.Button value={5}>已取消</Radio.Button>
            </Radio.Group>
            <Table loading="true" rowKey="_id" dataSource={orderData} pagination={pagination} onChange={handleChange}>
                <Column ellipsis="true" title="订单号" dataIndex="_id" key="_id" />
                <Column ellipsis="true" title="下单用户" key="user" render={(text, record) => record.user.nickname} />
                <Column title="总计金额" dataIndex="totalPrice" key="totalPrice" />
                <Column title="订单商品数" dataIndex="count" key="count" />
                <Column title="下单时间" dataIndex="startTime" key="startTime" />
                <Column title="完成时间" key="finishTime" render={(t, r) => {
                    if (r.status == 4) {
                        return <span>{r.finishTime}</span>
                    } else if (r.status == 2) {
                        return <span>正在出库</span>
                    } else if (r.status == 3) {
                        return <span>正在运送</span>
                    } else {
                        return <span>订单未完成</span>
                    }
                }} />
                <Column title="状态" key="status" render={(text, record) => {
                    if (record.status == 1) {
                        return (
                            <>
                                <Badge status="error" />
                                <span>待支付</span>
                            </>
                        )
                    } else if (record.status == 2) {
                        return (
                            <>
                                <Badge status="processing" />
                                <span>已支付</span>
                            </>
                        )
                    } else if (record.status == 3) {
                        return (
                            <>
                                <Badge status="processing" />
                                <span>正在运送</span>
                            </>
                        )
                    } else if (record.status == 4) {
                        return (
                            <>
                                <Badge status="success" />
                                <span>已完成</span>
                            </>
                        )
                    } else {
                        return (
                            <>
                                <Badge status="default" />
                                <span>已取消</span>
                            </>
                        )
                    }
                }} />
                <Column title="收货信息" key="receiveInfo" render={(text, record) =>
                    (<Button type="primary" onClick={() => showReceiveInfo(record._id)}>收货信息</Button>)
                } />
                <Column
                    title="操作"
                    key="action"
                    colSpan={{
                        span: 4
                    }}
                    render={(text, record) => (
                        <Space style={{ display: "flex", justifyContent: "center" }}>
                            <Button type="primary" onClick={() => handleEdit(record._id)}>
                                修改
                            </Button>
                            <Button type="primary" onClick={() => showDetail(record._id)}>
                                查看更多
                            </Button>
                        </Space>
                    )}
                />
            </Table>
        </>
    );
}
